<template>
    <div class="container">
        <!--
            使用iview的树节点组件，文档链接：https://www.iviewui.com/components/tree
        -->
        <Button type="primary" @click="append({uid:0})">添加根目录</Button>
        <Tree :data="data1" :render="renderContent"></Tree>
    </div>
</template>
<style lang="less" scoped>
    .container {
        width: 1200px;
        margin: 20px auto;
    }
</style>

<script>
    export default {
        data() {
            return {
                data1: [],
                buttonProps: {
                    type: 'ghost',
                    size: 'small',
                },
                appendValue: '',
                appendIndex: '',
                appendUrl: '',
                appendType: "0",
                deleteArr: [],
                cityList: [{
                        value: "1",
                        label: "新闻目录"
                    },
                    {
                        value: '2',
                        label: '产品目录'
                    },
                    {
                        value: '3',
                        label: '指定链接'
                    },
                ],
            }
        },
        methods: {
            /*
            使用iview 的树形控件，自定义节点需要JSX 
            */
            renderContent(h, {
                root,
                node,
                data
            }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'edit'
                            }),
                            style: {
                                marginRight: '8px',
                                width: '25px'
                            },
                            on: {
                                click: () => {
                                    this.edit(data)
                                }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'information'
                            }),
                            style: {
                                marginRight: '8px',
                                width: '25px'
                            },
                            on: {
                                click: () => {
                                    this.info(data)
                                }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-plus-empty'
                            }),
                            style: {
                                marginRight: '8px',
                                width: '25px'
                            },
                            on: {
                                click: () => {
                                    this.append(data)
                                }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-minus-empty'
                            }),
                            style: {
                                marginRight: '8px',
                                width: '25px'
                            },
                            on: {
                                click: () => {
                                    this.remove(root, node, data)
                                }
                            }
                        }),

                    ])
                ])
            },
            /**
            * @function 修改节点，使用Model弹出一个弹窗组件，里面有各个信息，也是自定义Model，需要JSX
            * @param {Object} data 当前节点的数据
            */
            edit(data) {
                this.appendValue = data.cate_name
                this.appendUrl = data.cate_url
                this.appendIndex = data.cate_rate
                this.appendType = data.cate_type.toString();   
                var that = this;
                this.$Modal.confirm({
                    render: (h) => {
                       // var that = this
                        return [h('Input', {
                                props: {
                                    value: this.appendValue,
                                    autofocus: true,
                                    placeholder: '请输入目录名称'
                                },
                                on: {
                                    input: (val) => {
                                        this.appendValue = val;
                                    }
                                }
                            }),
                            h('i-select', {
                                style: {
                                    margin: '10px 0 0'
                                },
                                props: {
                                    value: this.appendType
                                },
                                on: {
                                     input: function (value) {
                                        if(undefined === value){
                                            return;
                                        }
                                          that.appendType=value
                                    }, 
                                }
                            }, this.cityList.map(function (item) {
                                return h('Option', {
                                    props: {
                                        value: item.value,
                                        key: item.value,
                                        label: item.label
                                    }
                                },item.label)
                            })),
                            h('Input', {
                                style: {
                                    margin: '10px 0'
                                },
                                props: {
                                    value: this.appendUrl,
                                    autofocus: true,
                                    placeholder: '请输入目录链接',
                                    disabled: that.appendType != 3
                                },
                                on: {
                                    input: (val) => {
                                        this.appendUrl = val
                                    }
                                }
                            }),
                            h('Input', {
                                props: {
                                    value: this.appendIndex,
                                    autofocus: true,
                                    placeholder: '请输入目录排序'
                                },
                                on: {
                                    input: (val) => {
                                        this.appendIndex = val
                                    }
                                }
                            })
                        ]
                    },
                    onOk: () => {
                        let that = this
                        //更新数据
                        this.$axios.post(this.$api+'/api/admin/MenuUpdate', {
                                'uid': data.uid,
                                'cate_name': that.appendValue,
                                'cate_url': that.appendUrl,
                                'cate_rate': that.appendIndex,
                                'cate_type': that.appendType
                            }, {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                            .then(function (response) {
                                if (response.data.state == '1') {
                                    that.$Notice.success({
                                        title: '修改成功',
                                        desc: true ? '' : `目录名称：${data.cate_name}<br/>目录链接：${data.cate_url}<br/>目录索引：${data.cate_rate}`
                                    })
                                } else {
                                    that.$Notice.error({
                                        title: '修改失败',
                                        desc: true ? '' : `目录名称：${data.cate_name}<br/>目录链接：${data.cate_url}<br/>目录索引：${data.cate_rate}`
                                    })
                                }
                            })
                            .catch(function (response) {
                                that.$Notice.error({
                                    title: '修改失败',
                                    desc: true ? '' : `目录名称：${data.cate_name}<br/>目录链接：${data.cate_url}<br/>目录索引：${data.cate_rate}`
                                })
                            })
                    }
                })
            },
            /**
            * @function 弹出一个当前节点的信息
            * @param {Object} data 当前节点的数据
            */
            info: function (data) {
                this.$Notice.info({
                    title: '节点信息',
                    desc: false ? '' : `目录名称：${data.cate_name}<br/>目录链接：${data.cate_url}<br/>目录索引：${data.cate_rate}`
                })
            },
            /**
            * @function 新增节点，使用Model弹出一个弹窗组件，里面有各个信息，也是自定义Model，需要JSX，让用户输入新增节点的信息
            * @param {Object} data 当前节点的数据
            */
            append(data) {
                this.appendValue = ''
                this.appendUrl = ''
                this.appendIndex = ''
                this.appendType = 0
                var that = this;
                this.$Modal.confirm({
                    render: (h) => {
                        return [h('Input', {
                                props: {
                                    value: this.appendValue,
                                    autofocus: true,
                                    placeholder: '请输入目录名称'
                                },
                                on: {
                                    input: (val) => {
                                        this.appendValue = val
                                    }
                                }
                            }),
                            h('i-select', {
                                style: {
                                    margin: '10px 0 0'
                                },
                                props: {
                                    value: this.appendType
                                },
                                on: {
                                     input: function (value) {
                                        if(undefined === value){
                                            return;
                                        }
                                          that.appendType=value
                                    }, 
                                }
                            }, this.cityList.map(function (item) {
                                return h('Option', {
                                    props: {
                                        value: item.value,
                                        key: item.value,
                                        label: item.label
                                    }
                                },item.label)
                            })),
                            h('Input', {
                                style: {
                                    margin: '10px 0'
                                },
                                props: {
                                    value: this.appendUrl,
                                    autofocus: true,
                                    placeholder: '请输入目录链接',
                                    disabled: that.appendType != 3
                                },
                                on: {
                                    input: (val) => {
                                        this.appendUrl = val
                                    }
                                }
                            }),
                            h('Input', {
                                props: {
                                    value: this.appendIndex,
                                    autofocus: true,
                                    placeholder: '请输入目录排序'
                                },
                                on: {
                                    input: (val) => {
                                        this.appendIndex = val
                                    }
                                }
                            })
                        ]
                        /*
                        return h('Input', {
                            props: {
                                value: this.appendValue,
                                autofocus: true,
                                placeholder: 'Please enter your name...'
                            },
                            on: {
                                input: (val) => {
                                    this.appendValue = val
                                }
                            }
                        })
                        */
                    },
                    onOk: () => {
                        let that = this
                        //获取数据
                        this.$axios.post(this.$api+'/api/admin/MenuCreate', {
                                'belone_uid': data.uid,
                                'cate_name': that.appendValue,
                                'cate_url': that.appendUrl,
                                'cate_rate': that.appendIndex,
                                'cate_type': that.appendType
                            }, {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                            .then(function (response) {
                                if (response.data.state == '1') {
                                    that.$Notice.success({
                                        title: '插入成功',
                                        desc: true ? '' : `目录名称：${data.cate_name}<br/>目录链接：${data.cate_url}<br/>目录索引：${data.cate_rate}`
                                    })
                                    const children = data.children || []
                                    children.push({
                                        title: that.appendValue,
                                        expand: true
                                    })
                                    that.$set(data, 'children', children)
                                } else {
                                    that.$Notice.error({
                                        title: '插入失败',
                                        desc: true ? '' : `目录名称：${data.cate_name}<br/>目录链接：${data.cate_url}<br/>目录索引：${data.cate_rate}`
                                    })
                                }
                            })
                            .catch(function (response) {
                                that.$Notice.error({
                                    title: '插入失败',
                                    desc: true ? '' : `目录名称：${data.cate_name}<br/>目录链接：${data.cate_url}<br/>目录索引：${data.cate_rate}`
                                })
                            })
                    }
                })
            },
            /**
            * @function 删除选中的节点
            */
            remove(root, node, data) {
                let that = this
                this.deleteArr = []
                this.findChild(data)
                this.$axios.post(this.$api+'/api/admin/MenuDelete', {
                        uid: that.deleteArr.join(',')
                    }, {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                    .then(function (response) {
                        console.log(response)
                        if (response.data.state > 0) {
                        console.log('1')
                            
                            that.$Notice.success({
                                title: '删除成功',
                                desc: true ? '' : `目录名称：${data.cate_name}<br/>目录链接：${data.cate_url}<br/>目录索引：${data.cate_rate}`
                            })
                            const parentKey = root.find(el => el === node).parent
                            const parent = root.find(el => el.nodeKey === parentKey).node
                            const index = parent.children.indexOf(data)
                            parent.children.splice(index, 1)
                        } else {
                        console.log('2')
                            
                            that.$Notice.error({
                                title: '删除失败',
                                desc: true ? '' : `目录名称：${data.cate_name}<br/>目录链接：${data.cate_url}<br/>目录索引：${data.cate_rate}`
                            })
                        }
                    })
                    .catch(function (response) {
                        
                    })
            },
            /**
            * @function 查找子节点
            */
            findChild: function (node) {
                let that = this;

                if (node.children.length > 0) {
                    that.deleteArr.push(node.uid)
                    node.children.forEach(element => {
                        that.findChild(element)
                    });
                } else {
                    that.deleteArr.push(node.uid)
                }

                return that.deleteArr;
            }

        },
        created: function () {
            let that = this
            this.$axios.get(this.$api+'/api/admin/MenuGet', {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                .then(function (response) {
                    that.data1 = response.data.menu
                })
        },

    }
</script>